import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
    console.log('#1 constructor')
    // 1. 初始化 state 2. 创建 Ref 等
    this.state = {
      list: [],
    }
    this.spanRef = React.createRef()
  }
  // this.spanRef.current => DOM 元素
  render() {
    // 渲染 UI
    console.log('#2 render')
    // 不能【直接】在 render 里面调用 setState
    // 因为 setState 会触发渲染，然后再调用 render
    // !this.setState({})
    return (
      <div>
        Child
        <span
          ref={this.spanRef}
          onClick={() => {
            this.setState({})
          }}
        >
          xxx
        </span>
      </div>
    )
  }
  componentDidMount() {
    // 渲染完毕，类似于 Vue 中 mounted
    console.log('#3 componentDidMount')
    // 1. 发请求
    // 2. 获取渲染完毕的 DOM
    console.log(this.spanRef.current.innerHTML)
  }
}
